
<!DOCTYPE html>
<html>
<head>
  <title>图片懒加载示例</title>
  <style>
    .lazy-img {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      margin-bottom: 20px;
    }
    .wrapper{
        display: flex;
        flex-direction: column;
    }
  </style>
</head>
<body>
  <h1>图片懒加载示例</h1>
  <div class="imgwrapper">
    <img class="lazy-img" data-src="./img/image1.jpg" alt="Image 1">
    <img class="lazy-img" data-src="./img/image2.jpg" alt="Image 2">
    <img class="lazy-img" data-src="./img/image3.jpg" alt="Image 3">
    <img class="lazy-img" data-src="./img/image4.jpg" alt="Image 4">

  </div>
  


  <script>
    window.addEventListener('DOMContentLoaded', function() {
      var lazyImages = Array.prototype.slice.call(document.querySelectorAll('.lazy-img'));

      function lazyLoad() {
        lazyImages.forEach(function(img) {
          if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0) {
            if (img.getAttribute('data-src')) {
              img.setAttribute('src', img.getAttribute('data-src'));
              img.removeAttribute('data-src');
            }
          }
        });
      }

      lazyLoad();

      window.addEventListener('scroll', lazyLoad);
      window.addEventListener('resize', lazyLoad);
    });
  </script>
</body>
</html>

